/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { customer } from "@mall/api-services"
import * as _ from "lodash"
import * as React from "react"
import { RouteComponentProps, withRouter } from "react-router"
import Flex from "../components/flex"
import List from "../components/list"
import NavBar from "../components/navbar"
import Icon from "../icon"
import session, { MAIN_SHIPPING_ADDRESS_NAME } from "../session"
import "./shipping-addresses.scss"

interface CustomerDeliveryAddressesProps extends RouteComponentProps {

}

interface CustomerDeliveryAddressesState {

  deliveryAddresses: customer.CustomerAddress[];
}

class CustomerDeliveryAddresses
  extends React.Component<CustomerDeliveryAddressesProps, CustomerDeliveryAddressesState> {

  public constructor(props: Readonly<CustomerDeliveryAddressesProps>) {
    super(props)
    this.state = {
      deliveryAddresses: [],
    }

    this.refreshDeliveryAddresses = this.refreshDeliveryAddresses.bind(this)
    this.handleChangeMainAddress = this.handleChangeMainAddress.bind(this)
  }

  public componentDidMount(): void {
    this.refreshDeliveryAddresses()
  }

  public render() {
    const { history, match } = this.props
    const { deliveryAddresses } = this.state
    const customerId = match.params["customer_id"]
    return (
      <div className="customer-delivery-addresses">
        <NavBar left={<Icon onClick={() => history.goBack()}
                            type="left"/>}
                right={<span
                  onClick={() => history.push(`/customers/${customerId}/addresses/new`)}>添加新地址</span>}>收货地址</NavBar>
        <List className="customer-delivery-address-list">
          {_.map(deliveryAddresses, address =>
            <List.Item key={address.id} className="customer-delivery-address"
                       onClick={() => this.handleChangeMainAddress(address)}>
              <Flex alignItems="center">
                <span className="customer-delivery-address-consignee">{address.lastName}{address.firstName}</span>
                <span className="customer-delivery-address-mobile">{address.mobile}</span>
              </Flex>
              <Flex alignItems="center" justifyContent="space-between">
                            <span
                              className="customer-delivery-address-location">{`${address.location} ${address.address}`}</span>
                <Icon type="edit" size="xxs"
                      onClick={e => {
                        e.stopPropagation()
                        history.push(`/customers/${customerId}/addresses/${address.id}/edit`)
                      }}/>
              </Flex>
            </List.Item>)}
        </List>
      </div>
    )
  }

  private readonly refreshDeliveryAddresses = () => {
    const { match } = this.props
    const customerId = match.params["customer_id"]
    customer.CustomerAddressServiceV1.getAddresses(customerId)
      .then(deliveryAddresses => this.setState({ deliveryAddresses }))
  }

  private readonly handleChangeMainAddress = (address: customer.CustomerAddress) => {
    const { history, location } = this.props

    if (location.search.includes("change-main-address")) {
      session.set(MAIN_SHIPPING_ADDRESS_NAME, address)
      history.goBack()
    }
  }
}

export default withRouter(CustomerDeliveryAddresses)
